<!DOCTYPE html>
<html>
<head>

<title>Navigation example</title>

<script type='text/javascript' src='./js/navuri-0.0.2.js'></script>
<script type='text/javascript' src='./js/jquery-1.6.2.min.js'></script>

<style type="text/css">
	.blue {
		color:#00f;
	}
</style>

<script type="text/javascript">

	var sectionContent = {
		 "section-one"		: "section-1.html"
		,"section-two"		: "section-2.html"
	};
    
    function GoTo (p_cdSection) {
    	NavUri.Save(0, p_cdSection);
	}  
    
    function LoadSection () {
    	var cdSection = NavUri.Util.GetLabelByDepth(0);
   		if (cdSection) {
   			$.ajax({
	  			  "url"		 : sectionContent[cdSection]+"?no_cache=" + new Date()
	  			, "dataType" : "html"
	  			, "success"  : 
	  				function( p_data ) {
	  					$("#section_content").html( p_data );
	  				}
	      	});
  	 	}
    }
    
    $(document).ready(LoadSection);
    $(window).bind('hashchange', LoadSection);
    

</script>
</head>
<body>

<span class='blue'>
	THIS IS BLUE TEXT
</span>
<br><br>
<span class='green'>
	THIS IS GREEN TEXT
</span>

<div>
	<button type="button" onclick="GoTo('section-one')">Navigate to section 1</button>
	<button type="button" onclick="GoTo('section-two')">Navigate to section 2</button>
</div>

<div id="section_content" style="margin-top:50px;width:500px;height:500px;background-color:#eee;"></div>

</body>
</html>